<template>
  <div class="detail_module_panel personal_info">
    <h3 id="personal_info" class="detail_panel_title detail_panel_title_icon personal_info_icon">
      {{$t('tel.voiceProcedure')}}</h3>
    <!--电核中-->
    <div class="panel_info_content" v-if="this.checkStatus == 1">
      <el-form :model="userForm">
        <ol class="question_list">
          <li>
            <span
              v-if="$root.local == 'zhCN'">1.您好，请问是{{userData.realName}}{{userData.sex == 'MALE'?'先生':'女士'}}吗？</span>
            <span v-else>1.Hallo,{{userData.sex == 'MALE'?'dengan Pak':'Bu'}}&nbsp;{{userData.realName}}?</span>
            <div>{{$t('tel.question11')}}</div>
          </li>
          <!--<li class="ques11"></li>-->

          <li style="padding-top: 10px;">
            2.{{$t('tel.question2')}}<span>【{{userData.phone}}】</span>
            <el-form-item style="display: inline-block; width: 150px;">
              <el-select v-model="userForm.phoneAnswer" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                         @change="getValue1">
                <el-option :key="1" label="正确" :label="$t('tel.correct')" :value="1"></el-option>
                <el-option :key="2" label="错误" :label="$t('tel.wrong')" :value="2"></el-option>
                <el-option :key="3" label="有提示" :label="$t('tel.giveTips')" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <p><span class="ques11">2.1.{{$t('tel.question2a')}}【{{userData.whatsApp}}】</span>
              <el-form-item style="display: inline-block; width: 150px;">
                <el-select v-model="userForm.whatsApp" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                           @change="getOtherAnswer(userForm.whatsApp,'userForm.whatsApp')">
                  <el-option :key="1" label="一致" :label="$t('tel.consistent')" :value="1"></el-option>
                  <el-option :key="2" label="无法确定" :label="$t('tel.determineUnable')" :value="2"></el-option>
                  <el-option :key="3" label="不一致" :label="$t('tel.inconsistent')" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </p>
          </li>

          <li>
            3.{{$t('tel.question3')}}
            <div class="thumbnailImgWrap">
              <span>【{{userData.cardId}}】</span>
            </div>
            <el-form-item style="display: inline-block; width: 150px;">
              <el-select v-model="userForm.cardIdAnswer" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                         @change="getValue2">
                <el-option :key="1" label="正确" :label="$t('tel.correct')" :value="1"></el-option>
                <el-option :key="2" label="错误" :label="$t('tel.wrong')" :value="2"></el-option>
                <el-option :key="3" label="有提示" :label="$t('tel.giveTips')" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </li>
          <li class="card_img_list">
            <div>
              <a @click="showImg(userData.ocrUrl)" :style="backgroundImg(userData.ocrUrl)" href="javascript:void(0);"></a>
              <span class="img_desc">OCR</span>
            </div>
            <div>
              <!--<a @click="showImg(userData.cardPositiveImg)" :style="backgroundImg(userData.cardPositiveImg)" href="javascript:void(0);"></a>-->
              <a @click="showImg(cardPositiveImgUrl)" :style="backgroundImg(cardPositiveImgUrl)" href="javascript:void(0);"></a>
              <span class="img_desc">{{$t('xsDetails.idCardFrontSide')}}</span>
            </div>
            <div>
              <a @click="showImg(userData.cardImg)" :style="backgroundImg(userData.cardImg)" href="javascript:void(0);"></a>
              <span class="img_desc">{{$t('xsDetails.handCardPic')}}</span>
            </div>
          </li>

          <li>
            <p>4.{{$t('tel.title')}}</p>
            <p><span class="ques11">4.1.{{$t('tel.question4a')}}【{{userData.bankName}}】</span>
              <el-form-item style="display: inline-block; width: 150px;">
                <el-select v-model="userForm.bankAnswer" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                           @change="getValue(userForm.bankAnswer,'userForm.bankAnswer')">
                  <el-option :key="1" label="正确" :label="$t('tel.correct')" :value="1"></el-option>
                  <el-option :key="2" label="错误" :label="$t('tel.wrong')" :value="2"></el-option>
                  <el-option :key="3" label="有提示" :label="$t('tel.giveTips')" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </p>

            <p><span class="ques11">4.2.{{$t('tel.question4b')}}【{{address}}】</span>
              <el-form-item style="display: inline-block; width: 150px;">
                <el-select v-model="userForm.addressAnswer" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                           @change="getValue(userForm.addressAnswer,'userForm.addressAnswer')">
                  <el-option :key="1" label="正确" :label="$t('tel.correct')" :value="1"></el-option>
                  <el-option :key="2" label="错误" :label="$t('tel.wrong')" :value="2"></el-option>
                  <el-option :key="3" label="有提示" :label="$t('tel.giveTips')" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </p>

            <p><span class="ques11">4.3.{{$t('tel.question4c')}}</span><span v-if="userData.relationshipFirst">【{{userData.relationshipFirst?$t('xsDetails.relationshipList.' + userData.relationshipFirst):''}}/{{userData.contactFirst}}/{{userData.phoneFirst}}】</span>
              <span v-if="userData.relationshipSecond">【{{userData.relationshipSecond?$t('xsDetails.relationshipList.' + userData.relationshipSecond):''}}/{{userData.contactSecond}}/{{userData.phoneSecond}}】</span>
              <span v-if="userData.relationshipThird">【{{userData.relationshipThird?$t('xsDetails.relationshipList.' + userData.relationshipThird):''}}/{{userData.contactThird}}/{{userData.phoneThird}}】</span>
              <span v-if="userData.relationshipFourth">【{{userData.relationshipFourth?$t('xsDetails.relationshipList.' + userData.relationshipFourth):''}}/{{userData.contactFourth}}/{{userData.phoneFourth}}】</span>
              <el-form-item style="display: inline-block; width: 150px;">
                <el-select v-model="userForm.contactsAnswer" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                           @change="getValue(userForm.contactsAnswer,'userForm.contactsAnswer')">
                  <el-option :key="1" label="正确" :label="$t('tel.correct')" :value="1"></el-option>
                  <el-option :key="2" label="错误" :label="$t('tel.wrong')" :value="2"></el-option>
                  <el-option :key="3" label="有提示" :label="$t('tel.giveTips')" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </p>

            <p><span class="ques11">4.4.</span><span v-if="this.userType == 2"
                                                     class="red">{{$t('tel.question4d')}}</span>
              <span v-else>{{$t('tel.question4d')}}</span>
              <span>【{{userData.companyName}}】</span>
              <el-form-item style="display: inline-block; width: 150px;">
                <el-select v-model="userForm.companyNameAnswer" :placeholder="$t('systemAuthority.plsChoose')"
                           size="small" @change="getValue(userForm.companyNameAnswer,'userForm.companyNameAnswer')">
                  <el-option :key="1" label="正确" :label="$t('tel.correct')" :value="1"></el-option>
                  <el-option :key="2" label="错误" :label="$t('tel.wrong')" :value="2"></el-option>
                  <el-option :key="3" label="有提示" :label="$t('tel.giveTips')" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </p>
          </li>

          <li>
            5.{{$t('tel.question5')}}<span>【{{periodDays}}{{$t('xsDetails.day')}}】</span>
            <el-form-item style="display: inline-block; width: 150px;">
              <el-select v-model="userForm.periodAnswer" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                         @change="getValue7">
                <el-option :key="1" label="正确" :label="$t('tel.correct')" :value="1"></el-option>
                <el-option :key="2" label="认可" :label="$t('tel.accept')" :value="2"></el-option>
                <el-option :key="3" label="不认可" :label="$t('tel.notAccept')" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </li>

          <li>
            6.{{$t('tel.question6')}}<span>【{{ amount }}RP】</span>
            <el-form-item style="display: inline-block; width: 150px;">
              <el-select v-model="userForm.amountAnswer" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                         @change="getValue8">
                <el-option :key="1" label="正确" :label="$t('tel.correct')" :value="1"></el-option>
                <el-option :key="2" label="认可" :label="$t('tel.accept')" :value="2"></el-option>
                <el-option :key="3" label="不认可" :label="$t('tel.notAccept')" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </li>

          <li style="padding:0 0 20px 0;">
            7.{{$t('tel.question7')}}
            <el-form-item style="display: inline-block; width: 150px;">
              <el-select v-model="userForm.accountAnswer" :placeholder="$t('systemAuthority.plsChoose')" size="small"
                         @change="getValue10">
                <el-option :key="1" label="是" :label="$t('tel.yes')" :value="1"></el-option>
                <el-option :key="2" label="否" :label="$t('tel.no')" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <p> {{$t('tel.bankName')}}: {{userData.bankName}}</p>
            <p> {{$t('tel.entryBankNum')}}: {{userData.account}}</p>
            <p> {{$t('tel.getPaymentName')}}: {{userData.accountName}}</p>
            <p> Certified account name: {{userData.bankAccountHolderName}}</p>
          </li>

          <li v-if="isNotMatch" class="red">
            8.{{$t('tel.question8')}}<span v-if="notMatchName">【{{ notMatchName }}】</span>
          </li>
        </ol>
      </el-form>
    </div>

    <!--电核结案-->
    <div class="panel_info_content" v-else>
      <ol class="question_list">
        <li>
          <div v-if="$root.local == 'zhCN'">1.您好，请问是{{userData.realName}}{{userData.sex == 'MALE'?'先生':'女士'}}吗？</div>
          <div v-else>1.Hallo,{{userData.sex == 'MALE'?'dengan Pak':'Bu'}}&nbsp;{{userData.realName}}?</div>
          <div>{{$t('tel.question11')}}</div>
        </li>
        <!--<li class="ques11"></li>-->
        <li style="padding-top: 10px;">
          <el-col :span="24">
            2.<span>{{$t('tel.question2')}}</span>
            <span>【{{userData.phone}}】</span>
            <span v-if="this.answer" :class="color(answer.phoneAnswer)">{{ answer.phoneAnswer | answerStatus }}</span>
            <p><span class="ques11">2.1.{{$t('tel.question2a')}}【{{userData.whatsApp}}】</span>
            <span v-if="this.answer&&this.answer.otherAnswer&&this.answer.otherAnswer.whatsApp" :class="color1(answer.otherAnswer.whatsApp)">{{ answer.otherAnswer.whatsApp | answerStatus4 }}</span>
            <span v-else>--</span>
            </p>
          </el-col>
        </li>
        <li>
          3.<span>{{$t('tel.question3')}}</span>
          <div class="thumbnailImgWrap">
            <span>【{{userData.cardId}}】</span><br>
          </div>
          <span v-if="this.answer" :class="color(answer.cardIdAnswer)">{{ answer.cardIdAnswer | answerStatus }}</span>
        </li>
        <li class="card_img_list">
          <div>
            <a @click="showImg(userData.ocrUrl)" :style="backgroundImg(userData.ocrUrl)" href="javascript:void(0);"></a>
            <span class="img_desc">OCR</span>
          </div>
          <div>
            <!--<a @click="showImg(userData.cardPositiveImg)" :style="backgroundImg(userData.cardPositiveImg)" href="javascript:void(0);"></a>-->
            <a @click="showImg(cardPositiveImgUrl)" :style="backgroundImg(cardPositiveImgUrl)" href="javascript:void(0);"></a>
            <span class="img_desc">{{$t('xsDetails.idCardFrontSide')}}</span>
          </div>
          <div v-if="userData.cardImg">
            <a @click="showImg(userData.cardImg)" :style="backgroundImg(userData.cardImg)" href="javascript:void(0);"></a>
            <span class="img_desc">{{$t('xsDetails.handCardPic')}}</span>
          </div>
        </li>
        <li>
          <p>4.{{$t('tel.title')}}</p>
          <ol>
            <li>
              <span class="ques11">4.1.{{$t('tel.question4a')}}</span>
              <span>【{{userData.bankName}}】</span>
              <span v-if="this.answer" :class="color(answer.bankAnswer)">{{ answer.bankAnswer | answerStatus }}</span>
              <span class="rank-answer" v-if="answerRank.indexOf('userForm.bankAnswer') != -1">{{ $t('tel.askOrder', { index:answerRank.indexOf('userForm.bankAnswer') + 1 }) }}</span>
            </li>
            <li>
              <span class="ques11">4.2.{{$t('tel.question4b')}}</span>
              <span>【{{address}}】</span>
              <span v-if="this.answer" :class="color(answer.addressAnswer)">{{ answer.addressAnswer | answerStatus }}</span>
              <span class="rank-answer" v-if="answerRank.indexOf('userForm.addressAnswer') != -1">{{ $t('tel.askOrder', { index:answerRank.indexOf('userForm.addressAnswer') + 1 }) }}</span>
            </li>
            <li>
              <span class="ques11">4.3.{{$t('tel.question4c')}}</span><span v-if="userData.relationshipFirst">【{{userData.relationshipFirst?$t('xsDetails.relationshipList.' + userData.relationshipFirst):''}}/{{userData.contactFirst}}/{{userData.phoneFirst}}】</span>
              <span v-if="userData.relationshipSecond">【{{userData.relationshipSecond?$t('xsDetails.relationshipList.' + userData.relationshipSecond):''}}/{{userData.contactSecond}}/{{userData.phoneSecond}}】</span>
              <span v-if="userData.relationshipThird">【{{userData.relationshipThird?$t('xsDetails.relationshipList.' + userData.relationshipThird):''}}/{{userData.contactThird}}/{{userData.phoneThird}}】</span>
              <span v-if="userData.relationshipFourth">【{{userData.relationshipFourth?$t('xsDetails.relationshipList.' + userData.relationshipFourth):''}}/{{userData.contactFourth}}/{{userData.phoneFourth}}】</span>
              <span v-if="this.answer" :class="color(answer.contactsAnswer)">{{ answer.contactsAnswer | answerStatus }}</span>
              <span class="rank-answer" v-if="answerRank.indexOf('userForm.contactsAnswer') != -1">{{ $t('tel.askOrder', { index:answerRank.indexOf('userForm.contactsAnswer') + 1 }) }}</span>
            </li>
            <li>
              <span class="ques11">4.4.</span>
              <span v-if="this.userType == 2" class="red">{{$t('tel.question4d')}}</span>
              <span v-else>{{$t('tel.question4d')}}</span>
              <span>【{{userData.companyName}}】<span v-if="this.answer" :class="color(answer.companyNameAnswer)">{{ answer.companyNameAnswer | answerStatus }}</span></span>
              <span class="rank-answer" v-if="answerRank.indexOf('userForm.companyNameAnswer') != -1">{{ $t('tel.askOrder', { index:answerRank.indexOf('userForm.companyNameAnswer') + 1 }) }}</span>
            </li>
          </ol>
        </li>
        <li>
          5.{{$t('tel.question5')}}<span>【{{periodDays}}{{$t('xsDetails.day')}}】</span>
          <span v-if="this.answer" :class="color1(answer.periodAnswer)">{{ answer.periodAnswer | answerStatus1 }}</span>
        </li>
        <li>
          6.{{$t('tel.question6')}}<span>【{{ amount }}RP】</span>
          <span v-if="this.answer" :class="color1(answer.amountAnswer)">{{ answer.amountAnswer | answerStatus1 }}</span>
        </li>
        <li>
          7.{{$t('tel.question7')}}
          <span v-if="this.answer"
                :class="color1(answer.accountAnswer)">{{ answer.accountAnswer | answerStatus3 }}</span>
          <p> {{$t('tel.bankName')}}: {{userData.bankName}}</p>
          <p> {{$t('tel.entryBankNum')}}: {{userData.account}}</p>
          <p> {{$t('tel.getPaymentName')}}: {{userData.accountName}}</p>
          <p> Certified account name: {{userData.bankAccountHolderName}}</p>
        </li>
        <li class="red" v-if="isNotMatch">
          8.{{$t('tel.question8')}}<span v-if="notMatchName">【{{ notMatchName }}】</span>
        </li>
      </ol>
    </div>
    <show-image-video :visible.sync="showImgDialog" :video-src="videoUrl" :img-src="imgUrl">图片展示</show-image-video>
  </div>
</template>

<script>
  import storage from '@/libs/storage';
  import EventBus from '@/libs/event-bus';
  import {eventConf} from '@/config/';
  import ShowImageVideo from '@/components/show-image-video';

  let that = null;

  export default {
    name: 'userOrderInfo',
    props: {
      userData: {
        type: Object
      },
      isNotMatch: {
        type: Boolean
      },
      notMatchName: {
        type: String
      }
    },
    components: {
      ShowImageVideo,
    },
    data() {
      return {
        imgUrl: '',
        videoUrl: '',
        showImgDialog: false,
        answerRank: [],
        userForm: {
          phoneAnswer: '',
          cardIdAnswer: '',
          bankAnswer: '',
          addressAnswer: '',
          contactsAnswer: '',
          companyNameAnswer: '',
          periodAnswer: '',
          amountAnswer: '',
          whatsApp:'',
        },
        checkStatus: '',
        answer: {
          otherAnswer:{
            whatsApp:''
          }
        },
        periodDays: '',
        amount: '',
        // callSrc: '',
        language: storage.getLocal('language'),
        start: 0,
        valueArr: [],
      };
    },
    computed: {
      address() {
        let address = '';
        const baseInfo = this.userData;
        if (baseInfo.address) {
          address = baseInfo.province + ' ' + baseInfo.city + ' ' + baseInfo.district + ' ' + baseInfo.address;
        }
        return address;
      },
      cardPositiveImgUrl() {
        const { userData } = this;
        if (userData.userCardInfoIsChange) {
          return userData.userCardInfoIsChange;
        } else if (!userData.ocrUrl && !userData.userCardInfoIsChange && userData.cardPositiveImg) {
          return userData.cardPositiveImg;
        }
        return '';
      },
    },
    methods: {
      showImg(url, video) {
        if (video && url) {
          this.videoUrl = url;
          this.imgUrl = '';
          this.showImgDialog = true;
        } else if (!video && url) {
          this.showImgDialog = true;
          this.imgUrl = url;
          this.videoUrl = '';
        }
      },
      backgroundImg(url) {
        // 构造图片展示
        const style = {};
        if (url) {
          style.backgroundImage = 'url("' + url + '")';
        }
        return style;
      },
      getOrderInfo() {
        const params = {
          orderNid: this.orderId,
        };
        this.$api.tel.getOrderInfo(params).then((res) => {
          const {status, data} = res;
          if (status === '1') {
            this.amount = data[0].amount;
            this.periodDays = data[0].periodDays;
            this.checkStatus = data[0].checkStatus;
            this.queryTelAnswer();
          }
        });
      },
      listenEvent() {
        EventBus.$on(eventConf.UPDATATELRECORD, () => {
          this.getOrderInfo();
          this.userForm.phoneAnswer = '';
          this.userForm.cardIdAnswer = '';
          this.userForm.bankAnswer = '';
          this.userForm.addressAnswer = '';
          this.userForm.contactsAnswer = '';
          this.userForm.companyNameAnswer = '';
          this.userForm.periodAnswer = '';
          this.userForm.amountAnswer = '';
          this.userForm.whatsApp = '';
        });
      },
      queryTelAnswer() {
        const params = {
          orderNid: this.orderId,
        };
        this.$api.tel.queryTelAnswer(params).then((res) => {
          const {status, data} = res;
          if (status === '1' && data && data.answerRankList === null) {
            this.answer = data;
          } else if (status === '1'&& data && data.answerRankList.length > 0) {
            this.answer = data;
            this.answerRank = data.answerRankList;
          }
        });
      },
      getValue1(val) {
        EventBus.$emit('myParams1', val);
      },
      getValue2(val) {
        EventBus.$emit('myParams2', val);
      },
      getValue(val, model) {
        if (this.valueArr.indexOf(model) === -1) {
          this.valueArr.push(model);
        }
        EventBus.$emit('myParams3', this.userForm.bankAnswer);
        EventBus.$emit('myParams4', this.userForm.addressAnswer);
        EventBus.$emit('myParams5', this.userForm.contactsAnswer);
        EventBus.$emit('myParams6', this.userForm.companyNameAnswer);
        EventBus.$emit('myParams9', this.valueArr);
      },
      getValue7(val) {
        EventBus.$emit('myParams7', val);
      },
      getValue8(val) {
        EventBus.$emit('myParams8', val);
      },
      getValue10(val) {
        EventBus.$emit('myParams10', val);
      },
      // getValue11(val) {
      //   EventBus.$emit('myParams11', val);
      // },
      getOtherAnswer(){
        EventBus.$emit('otherAnswerTel',{"whatsApp":String(this.userForm.whatsApp)});
      },
      color1(e) {
        if (e === '1') {
          return 'green';
        } else if (e === '2') {
          return 'green';
        } else if (e === '3') {
          return 'red';
        } else {
          return 'black'
        }
      },
      color(e) {
        if (e === '1') {
          return 'green';
        } else if (e === '2') {
          return 'red';
        } else if (e === '3') {
          return 'purple';
        } else {
          return 'black'
        }
      },
    },
    created() {
      that = this;
      const params = this.$route.params;
      this.userId = params.id;
      this.orderId = params.orderId;
      this.userType = params.userType;
      this.checkStatus = params.checkStatus;
      if (this.checkStatus !== '1') {
        this.queryTelAnswer();
      }
      this.listenEvent();
      this.getOrderInfo();
    },
    filters: {
//        身份认证状态
      idCardStatus(validStatus) {
        switch (validStatus) {
          case '0':
            return that.$t('csDetails.pending');
          case 'fail':
            return that.$t('csDetails.notPass');
          case 'success':
            return that.$t('csDetails.pass');
          case 'mismatch':
            return that.$t('csDetails.nameNotMatching');
          case 'uncertain':
            return that.$t('csDetails.cannotSure');
          default :
            return '--';
        }
      },
      answerStatus(answer) {
        switch (answer) {
          case '1':
            return that.$t('tel.correct'); // 正确
          case '2':
            return that.$t('tel.wrong'); // 错误
          case '3':
            return that.$t('tel.giveTips'); // 有提示
          default :
            return '--';
        }
      },
      answerStatus1(answer) {
        switch (answer) {
          case '1':
            return that.$t('tel.correct'); // 正确
          case '2':
            return that.$t('tel.accept'); // 认可
          case '3':
            return that.$t('tel.notAccept'); // 不认可
          default :
            return '--';
        }
      },
      answerStatus3(answer) {
        switch (answer) {
          case '1':
            return that.$t('tel.yes'); // 是
          case '2':
            return that.$t('tel.no'); // 否
          default :
            return '--';
        }
      },
      answerStatus4(answer) {
        switch (answer) {
          case '1':
            return that.$t('tel.consistent'); // 一致
          case '2':
            return that.$t('tel.determineUnable'); // 无法确定
          case '3':
            return that.$t('tel.inconsistent'); // 不一致
          default :
            return '--';
        }
      },
    }

  };
</script>

<style lang="scss" scoped>
  @import "~@/assets/scss/function";
  .thumbnailImgWrap {
    display: inline-block;
    vertical-align: top;
    text-align: center;
  }

  /*.thumbnailImg {*/
    /*max-width: 120px;*/
    /*max-height: 150px;*/
  /*}*/

  .rank-answer {
    display: inline-block;
    width: 55px;
    margin-left: 10px;
    color: #000;
    background-color: #CC6633;
    text-align: center;
  }

  .blue {
    margin-left: 10px;
    color: #1983fa;
    font-weight: bold;
  }

  .ques11 {
    padding-left: 10px;
    padding-top: 10px;
  }

  .red {
    color: red;
  }

  .green {
    color: green;
  }

  .purple {
    color: purple;
  }

  .black {
    color: #000;
  }

  .question_list{
    padding-left: 32px;
    padding-right: 32px;
    li{
      line-height: 32px;
    }
  }
  .card_img_list{
    position: relative;
    div{
      display: inline-block;
      width: 200px;
      margin-right: 24px;
      border: 1px solid $colorSplit;
      border-radius: 8px;
      overflow: hidden;
      img{
        display: block;
        height: 112px;
        width: 100%;
        background-color: #e5e5e5;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
      .img_desc{
        height: 32px;
        line-height: 32px;
        padding: 0 16px;
      }
    }
    a{
      display: block;
      height: 112px;
      width: 100%;
      background-color: #e5e5e5;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
  }
</style>
